<template>
    <div class="components_edit_modal">
        <el-dialog width="830px" title="作业成绩详情" :visible.sync="state" :show-close="true" :close-on-click-modal="false">
            <div class="components_searchs">
                    <span class="tit" style="width:50px">学号：</span>
                    <el-input v-model="table.queryParams.studentNumber" auto-complete="off" placeholder="请输入学号">
                    </el-input>

                    <span class="tit" style="width:50px">姓名：</span>
                    <el-input v-model="table.queryParams.name" auto-complete="off" placeholder="请输入姓名">
                    </el-input>

                    <span class="tit" style="width:50px">班级：</span>
                    <el-select v-model="table.queryParams.classId" clearable placeholder="请选择班级" style="width:150px">
                        <el-option
                            v-for="item in classList"
                            :key="item.id"
                            :label="item.text"
                            :value="item.id">
                        </el-option>
                    </el-select>

                <el-button type="primary" icon="el-icon-search" size="mini" @click="queryTable">查询</el-button>
                <el-button type="primary" icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </div>
            <vue-table
                :api-url="table.apiUrl"
                :fields="table.fields"
                :appendParams="table.queryParams"
                :content="self"
                ref="homeWorkDetailTable">
            </vue-table>
        </el-dialog>

    </div>
</template>

<script>
    import {enums} from '@/constant'
    import {mapGetters} from 'vuex'
    export default {
        components: {
        },
        data() {
            return {
                self: this,
                state: false,
                table: {
                    apiUrl: api.homeworkTeacher.queryStudentScoreList,
                    queryParams: {
                        studentNumber: null,   // 作业名称
                        name: null,   //学期
                        classId:null,   // 班级id
                        homeworkId: null,   //作业id
                    },
                    fields: [{
                            prop: "__index",
                            label: "序号",
                        },
                        {
                            prop: "studentNumber",
                            label: "学号",
                        },
                        {
                            prop: "name",
                            label: "姓名",
                        },
                        {
                            prop: "class",
                            label: "班级",
                        },
                        {
                            prop: "score",
                            label: "得分",
                        },
                        {
                            prop: "comments",
                            label: "批注",
                        },
                    ],
                },
                // 班级
                classList: null,
            }
        },
        created() {
            this.getClassList();
        },
        mounted() {},
        computed: {
        },
        methods: {
            // 打开模态框
            showDialog(id){
                // 查询学生列表
                this.state = true;
                this.table.queryParams.homeworkId = id;
                this.resetQuery();
            },
            // 查询学期列表(来自字典)
            getClassList(){
                let vm = this;
                vm.axios.get(api.getClassList)
                    .then((response) => {
                    if (response.data.success) {
                        this.classList = JSON.parse(JSON.stringify(response.data.data));
                    } else {
                        vm.$message.error(response.data.msg);
                    }
                })
            },
            queryTable(){
                this.$refs.homeWorkDetailTable.$emit('vuetable:refresh')
            },
            resetQuery(){
                this.table.queryParams.studentNumber = null;
                this.table.queryParams.name = null;
                this.table.queryParams.classId = null;
                this.$nextTick(()=>{
                    this.$refs.homeWorkDetailTable.$emit('vuetable:refresh')
                })

            },
        },
    };
</script>
<style scoped>

</style>